<template>
  <div id="app">
    <div class="content-container">
      <div class="image-container">
        <!--        <img src="@/assets/img/publicBrand/绘制数字农业产业园图 (1).png" alt="Image 1" class="image" />-->
        <img :src="imageUrls[0]" alt="微信图片1" class="left-image" />
        <img :src="imageUrls[1]" alt="微信图片2" class="left-image" />
      </div>

      <DynamicFlowEconomyComponent
          :title="'健全区域公用品牌运营管理体系'"
          :content="[
'建立“政府统筹、协会主导、企业参与、社会监督”的四位一体治理结构。政府负责顶层设计，制定品牌准入、退出、评价与保护的地方性法规，设立专项资金和绩效审计；行业协会组建品牌运营中心，统一视觉识别、质量标准、价格区间和传播口径，实行“一品一码”全程溯源；龙头企业与合作社作为市场主体，按订单组织标准化生产，并共享仓储、冷链、电商、检测等公共服务；高校、媒体和消费者代表组成第三方监督委员会，每季度发布品牌公信力报告，倒逼质量持续提升。深度挖掘铅山的历史、典故、遗址、名人与美景、美食的渊源与结合点，完善“铅字号”品牌使用及管理机制。开展地理+文化+气韵+物产的区域整体形象建设，挖掘体现独特地理条件和文化中孕育的产品的独特性。在打响江西武夷山国家公园区域品牌的基础上，将铅山河红茶、红芽芋融入区域品牌宣传。'
      ]"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import DynamicFlowEconomyComponent from "@/views/regionalPublicBrand/DynamicFlowEconomyComponent.vue";

// 定义图片URL数组
const imageUrls = [
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250627163629.png',
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250627161427.png'
];

// 预加载图片函数
const preloadImages = () => {
  imageUrls.forEach((url, index) => {
    const img = new Image();
    img.src = url;
    const altText = index === 0 ? '微信图片1' : '微信图片2';
    img.onload = () => {
      console.log(`图片预加载成功: ${altText}`);
    };
    img.onerror = (error) => {
      console.error(`图片预加载失败: ${altText}`, error);
    };
  });
};

// 在组件挂载前预加载图片
onMounted(() => {
  preloadImages();
});
</script>

<style scoped>
.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.left-image {
  width: 500px; /* 根据需要调整图片宽度 */
  margin-right: 20px; /* 图片与文本之间的间距 */
  margin-bottom: 40px;
}

#app {
  padding: 20px; /* 页面内边距 */
}

.content p {
  line-height: 1.6;
}
</style>
